<template>
    <div class="newsContainer">
        <NewsTopBack/>
        <div class="news">
            <h1>NEWS ARCHIVE</h1>
            <div v-for="item in currentNews" :key="item.id" class="singleNews">
                <RouterLink :to="{
                    name: item.router,
                    params:{
                        commonTitle: item.commonTitle,
                        category: item.category,
                        date: item.date,
                        pic: item.pic,
                        content: item.content
                    }}">
                    <div class="newsImg">
                        <img :src="item.pic" alt="">
                    </div>
                    <div class="newContext">
                        <p class="date">{{ item.date }}</p>
                        <p class="category">{{ item.category }}</p>
                        <p class="title">{{ item.title }}</p>
                        <p class="description">{{ item.description }}</p>
                    </div>
                </RouterLink>
            </div>
            <div class="paging">
                <button v-if="currentPage > 1" @click="prevPage" class="page-btn">
                    <span class="arrow">&lt;</span> Previous
                </button>

                <div class="page-numbers">
                    <button
                        v-for="page in totalPages"
                        :key="page"
                        :class="['page-number', { active: page === currentPage }]"
                        @click="goToPage(page)"
                    >
                        {{ page }}
                    </button>
                </div>

                <button v-if="currentPage < totalPages" @click="nextPage" class="page-btn">
                    Next <span class="arrow">&gt;</span>
                </button>
            </div>
        </div>
    </div>
</template>

<script setup>
import {reactive, computed, ref} from "vue";
import NewsTopBack from "@/views/AboutUs/components/news/NewsTopBack.vue";

const news = reactive([
    {
        id: '001',
        date: '31 MAR 2025',
        category: 'ANNOUNCEMENT - CLASH OF CLANS',
        title: 'WWE Superstars Take Over Clash of Clans Ahead of WrestleMania 41',
        description: 'During April, Undisputed WWE Champion Cody Rhodes, Rhea Ripley, The Undertaker, Bianca Belair and other WWE Superstars will be reimagined as iconic characters inside the world of Clash of Clans, culminating in an enhanced match sponsorship at WrestleMania 41 at Allegiant Stadium in Las Vegas.',
        pic: '/src/assets/img/home/new01.webp',
        router: '/about-us/news/001',
        commonTitle: '',
        content: ''
    }, {
        id: '002',
        date: '18 MAR 2025',
        category: 'ANNOUNCEMENT - MO.CO',
        title: 'mo.co - Supercell\'s Next Big Adventure Begins!',
        description: 'The mo.co team have decided to green light the game for global launch - but you\'ll need an invite to join',
        pic: '/src/assets/img/home/new02.webp',
        router: '/about-us/news/002',
        commonTitle: '',
        content: ''
    }, {
        id: '003',
        date: '13 MAR 2025',
        category: 'BLOG - EVENTS',
        title: 'Gearing Up for the Game Developers Conference',
        description: 'As eternally as the Sun shines on the Golden Coast, so does the Game Developers Conference continue bringing the games industry together. In other words, GDC is here, and we are there!',
        pic: '/src/assets/img/home/new03.webp',
        router: 'commonNews',
        commonTitle: 'Gearing Up for the Game<br/>Developers Conference',
        content: 'This year, we have not one, neither two, neither three, but five events during the GDC week. With much joy, pleasure and excitement, we welcome all GDC visitors to join us for inspiration, learning and human connections.Live Service Games Summit: Game Designer\'s Notebook "Designing the Derby – Lessons from Hay Day"Camila Avellar, Design Lead for Hay DayTuesday, March 18 | 2:40pm - 3:40 pmArm Developer Summit Panel DiscussionOtto Söderlund, AI LeadTuesday, March 18 | 11:20am - 1:00pmMaking of a Brawler: Character Creation for \'Brawl Stars\' LectureFernanda Oliveira, Game Artist for Brawl StarsWednesday, March 19 | 9:00am - 10:00amGame Changers: Women Driving the Industry Forward Panel and Networking EventSupercell Employees and AlumniWednesday, March 19 | 3:00pm - 7:00pmIs Diversity a dirty word in 2025? Supercell\'s 4-Pillar Approach to DEI LectureCasey Manning, People & RecruitmentDeborah Mensah-Bonsu, Give Back & DEIThursday, March 20 | 9:30am - 10:30amCome say hi and follow us on LinkedIn.'
    }, {
        id: '004',
        date: '14 FEB 2025',
        category: 'ANNOUNCEMENT - CLASH ROYALE',
        title: 'Introducing Barboltian This Valentine’s Day',
        description: 'The new duet alongside the king of romance is out now on all major streaming platforms',
        pic: '/src/assets/img/home/new04.webp',
        router: 'commonNews',
        commonTitle: 'Introducing Barboltian This<br/>Valentine’s Day',
        content: 'Barboltian, formerly Barbarian, comes to life through a partnership between Sony Music Publishing and Supercell, distributed by The Orchard, to remake one of the greatest love songs of all time.Having seen some of their long-time players leave the game in recent years, the Clash Royale team connected with legendary Grammy Award-winning singer/songwriter Michael Bolton. The ask: to reimagine one of his biggest hits and deliver a special message to fans for Valentine’s Day. Mr. Bolton gave his blessing and worked with the team to create an epic new version of his beloved hit, How Am I Supposed to Live Without You.'
    }, {
        id: '005',
        date: '15 JAN 2025',
        category: 'ANNOUNCEMENT – HAY DAY',
        title: 'Gordon Ramsay Reveals Calm HomeNews Persona as He Becomes a Character in Hay Day',
        description: 'To help spread his new-found harmony, Gordon Ramsay is entering Hay Day for a limited time, replacing fan favourite ‘Greg’ who has “gone on a fishing trip”.',
        pic: '/src/assets/img/home/new05.webp',
        router: 'commonNews',
        commonTitle: 'Gordon Ramsay Reveals Calm<br/>New Persona as He Becomes a<br/>Character in Hay Day',
        content: 'Gordon Ramsay is replacing one of our most loved characters in Hay Day!The celebrity chef’s game of choice might surprise fans more used to his angry outbursts, but Hay Day is renowned for its calming properties and Ramsay has embraced these wholeheartedly.To help spread his new-found harmony, the reformed Ramsay is entering Hay Day for a limited time, replacing Greg who has “gone on a fishing trip”. From 15th until 24th January, Ramsay will be an in-game character, where he will be taking over Greg’s role in assisting players in looking after their farms, with new features and events also taking place.In tandem with the in-game appearance, Ramsay stars in a video revealing how he found tranquility by playing the game. It shows his journey of trying to find peace, from affirmations to digital detoxing to weighted blankets and finally, laughter therapy.'
    }, {
        id: '006',
        date: '5 SEPT 2024',
        category: 'ANNOUNCEMENT - BRAWL STARS',
        title: 'SpongeBob SquarePants Shows up in Brawl Stars for a Special Takeover',
        description: 'The world of Brawl Stars meets Bikini Bottom, with a SpongeBob SquarePants takeover running in-game from September 5th to October 2nd.',
        pic: '/src/assets/img/home/new06.webp',
        router: 'commonNews',
        commonTitle: 'SpongeBob SquarePants Shows<br/>up in Brawl Stars for a Special<br/>Takeover',
        content: 'The world of Brawl Stars meets Bikini Bottom as the Nickelodeon animated series SpongeBob SquarePants celebrates its 25th anniversaryIn-game takeover runs from September 5th to October 2nd, with iconic characters such as SpongeBob, Patrick, and Mr. Krabs reimagined as popular BrawlersThe partnership gives Brawl Stars players the perfect dose of nostalgia, alongside launch content featuring actor, fan, and WWE legend John CenaBrawl Stars has partnered with Nickelodeon’s SpongeBob SquarePants to mark the show’s 25th anniversary by reimagining the world of Bikini Bottom inside the game.As part of the takeover, iconic SpongeBob SquarePants characters have been reimagined as Brawlers, including a muscle-bound El Primo SpongeBob and other fan-favourites such as Patrick, Mr. Krabs, Squidward and Sandy. Brawls will take place on the new Bikini Bottom game map and special, temporary power-ups will provide increased damage, like the Krabby Patty, Clarinet and Kelp Soda. Meanwhile, themed game modes bring fresh gameplay and chaos, such as in Jellyfishing where players battle to catch…you guessed it, jellyfish.'
    }
]);

const itemsPerPage = 4;
const currentPage = ref(1);

const totalPages = computed(() => Math.ceil(news.length / itemsPerPage));
const currentNews = computed(() => {
    const start = (currentPage.value - 1) * itemsPerPage;
    return news.slice(start, start + itemsPerPage);
});

function prevPage() {
    if (currentPage.value > 1) {
        currentPage.value--;
    }
}

function nextPage() {
    if (currentPage.value < totalPages.value) {
        currentPage.value++;
    }
}

function goToPage(page) {
    currentPage.value = page;
}
</script>

<style scoped>
.singleNews {
    width: 785px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin: 0 auto 40px auto;
}

.singleNews a {
    text-decoration: none;
    color: #000;
    display: flex;
}

.news {
    margin-bottom: 50px;
}

.news h1 {
    text-align: center;
    margin: 60px 0;
    font-size: 34px;
    font-weight: bold;
}

.newsImg {
    width: 177px;
    height: 133px;
    margin-right: 20px;
}

.newsImg img {
    width: 100%;
    height: auto;
}

.newContext {
    flex: 1;
}

.newContext .date, .category {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #fb4a9d;
    text-transform: uppercase;
}

.newContext .title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.newContext .description {
    font-size: 14px;
}

.paging {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
}

.page-btn {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 5px 10px;
    transition: color 0.3s;
    color: rgb(204, 204, 204);
}

.page-numbers {
    display: flex;
    gap: 15px;
}

.page-number {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 10px;
    min-width: 30px;
    text-align: center;
    transition: all 0.3s;
    font-size: 18px;
    color: rgb(204, 204, 204);
}

.page-number.active {
    color: rgb(45, 133, 243);
    font-weight: bold;
    font-size: 24px;
}

.arrow {
    font-size: 18px;
    font-weight: bold;
}
</style>